<!--  -->
<template>
  <div class="home-Banner">
    <div class="banner">
      <TitleHeader :value="value"></TitleHeader>    
    </div>
      <!-- <div class="banner-header"></div> -->
     <div class="banner-body">
       <div class="body-box" v-for="item in brandList" :key="item.id" @click="toBrand(item.id)" :style="{'background-image': `url(${item.pic_url})`}">
         <div class="p">
          <h4>{{item.name}}</h4>
          <p ref="price">￥{{item.floor_price}}元</p>
         </div>
       </div>
     </div>
  </div>
</template>

<script>
import {defineComponent, ref, computed} from 'vue'
import {useRouter} from 'vue-router'
import TitleHeader from '@/components/TitleHeader.vue'
export default defineComponent({
  name: 'HomeBannerList',
  components: {
    TitleHeader
  },
  props: {
    brandList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup() {
    let price = ref(null)
    const value = ref('品牌制造商直供')
    const router = useRouter()
    // const text = computed((num) => {
    //   let newNum = num + ''
    //   if (newNum.includes('.')) {
    //     newNum += '0'
    //   }else {
    //     newNum += '.00'
    //   }
    //   return +newNum
    // })
    // const text = computed((num) => {
    //   let newNum = num + ''
    //   if (newNum.includes('.')) {
    //     newNum += '0'
    //   }else {
    //     newNum += '.00'
    //   }
    //   console.log(newNum);
    //   return +newNum
    // })
    const toBrand = (id) => {
      router.push({
        path: '/brand',
        query: {
          id
        }
      })
    }
    return {
      toBrand,
      value,
      // text
    }
  }

})
</script>

<style lang="scss" scoped>
  
  .home-Banner {
    width: 100%;
    height: 580px;
    background-color: #fff;
    margin: 40px 0;
  }
  .banner {
    width: 100%;
    height: 100px;
  }
  .banner-body {
    width: 100%;
    height: 480px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
  }
  .body-box {
    width: 49%;
    height: 49%;
    /* background-color: red; */
    /* background-image: url("http://yanxuan.nosdn.127.net/2b7a07e25a3f3be886a7fb90ba975bb7.png"); */
    background-size: 100% 100% ;
    position: relative;
  }
  .p {
    position: absolute;
    top: 40px;
    left: 40px;
  }
  h4 {
    font-size: 28px;
  }
  p {
    color: #970000;
    font-size: 28px;
  }
</style>